<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<title>在线定制|51包装</title>
	</head>

	<body>
		<header>
			<div class="loginbar">
				<div class="container">
					<div class="loginbar-tel pull-left">
						客服热线：010-594-78634
					</div>
					<div class="loginbar-login pull-right">
						<ul class="nav">
							<li role="presentation">
								<a href="#">登陆</a>
							</li>
							<li role="presentation">
								<a href="#">注册</a>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<div class="header-nav">
				<div class="container">
					<div class="row">
						<ul class="nav nav-pills col-md-8 col-sm-12">
							<li role="presentation" class="active col-md-3 col-sm-3 col-xs-6">
								<a href="#">首页</a>
							</li>
							<li class="col-md-3 col-sm-3 col-xs-6">
								<a href="#">在线定制</a>
							</li>
							<li class="col-md-3 col-sm-3 col-xs-6">
								<a href="#">标准箱</a>
							</li>
							<li class="col-md-3 col-sm-3 col-xs-6">
								<a href="#">品质保障</a>
							</li>

						</ul>
					</div>
				</div>

			</div>
		</header>
		<div class="main">
			<div class="container">
				<div class="row custom-step-wrap">
					<div class="col-md-offset-6 col-md-6">
						<div class="step col-md-3 col-sm-3 col-xs-12 active">
							<span class="step-no">1</span>
							<span>1.定制纸箱</span>

						</div>
						<div class="step col-md-3 col-sm-3 col-xs-12">
							<span class="step-no">2</span>
							<span>2.选择数量</span>

						</div>
						<div class="step col-md-3 col-sm-3 col-xs-12">
							<span class="step-no">3</span>
							<span>3.上传附件</span>

						</div>
						<div class="step col-md-3 col-sm-3 col-xs-12">
							<span class="step-no">4</span>
							<span>4.确认下单</span>

						</div>
					</div>
				</div>

				<div class="row">
					<div class="custom-content col-md-12">
						<h4 class="custom-tip">请您按照以下步骤来定制您的纸箱</h4>
						<form class="custom-form">
							<div class="panel panel-default">
								<div class="panel-heading"><span><img src="img/box-type.png"/></span>选择箱型</div>
								<div class="panel-body">
									<label class="checkbox-inline"><input type="radio" name="typeOptions" id="typeOptions1" value="typeOption1" checked="checked"/><span>对口箱</span></label>
									<label class="checkbox-inline"><input type="radio" name="typeOptions" id="typeOptions2" value="typeOption2" /><span>飞机盒</span></label>
									<label class="checkbox-inline"><input type="radio" name="typeOptions" id="typeOptions3" value="typeOption3" /><span>天地盖</span></label>

									<div class="btn-group">
										<button type="button" class="btn btn-default">查看详情</button>
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									      <span class="caret"></span>									 
									    </button>
										<ul class="dropdown-menu" role="menu">
											<li>
												<a href="#">详情1</a>
											</li>
											<li role="presentation">
												<a href="#">详情2</a>
											</li>

											<li role="presentation">
												<a href="#">详情3</a>
											</li>
											<li role="presentation">
												<a href="#">详情4</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><span><img src="img/Ruler.png"/></span>确定尺寸</div>
								<div class="panel-body">
									
										<div class="pull-left">
											<div class="outerDiameter">
												<label class="checkbox checkbox-inline"><input type="radio" name="diameters" id="outerDiameter" value="option1" checked="checked" /><span>外径</span></label>
												<label class="control-label diameter-number" for="outerLength"> 长<input class="input-number" type="number" name="outerLength" id="outerLength" value="" />mm</label>
												<label class="control-label diameter-number" for="outerWidth">宽<input class="input-number" type="number" name="outerWidth" id="outerWidth" value="" />mm</label>
												<label class="control-label diameter-number" for="outerHeight">高<input class="input-number" type="number" name="outerHeight" id="outerHeight" value="" />mm</label>

											</div>
											<div class="outerDiameter">
												<label class="checkbox checkbox-inline"><input type="radio" name="diameters" id="outerDiameter" value="option2" /><span>内径</span></label>
												<label class="control-label diameter-number" for="innerLength">长<input class="input-number" type="number" name="innerLength" id="innerLength" value="" />mm</label>
												<label class="control-label diameter-number" for="innerWidth">宽<input class="input-number" type="number" name="innerWidth" id="innerWidth" value="" />mm</label>
												<label class="control-label diameter-number" for="innerHeight">高<input class="input-number" type="number" name="innerHeight" id="innerHeight" value="" />mm</label>
											</div>
										</div>

										<div class="btn-group">
											<button type="button" class="btn btn-default">查看详情</button>
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									      <span class="caret"></span>									 
									    </button>
											<ul class="dropdown-menu" role="menu">
												<li>
													<a href="#">详情1</a>
												</li>
												<li role="presentation">
													<a href="#">详情2</a>
												</li>

												<li role="presentation">
													<a href="#">详情3</a>
												</li>
												<li role="presentation">
													<a href="#">详情4</a>
												</li>
											</ul>
										</div>
									
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><span><img src="img/Cut.png"/></span>选择材质</div>
								<div class="panel-body">
									<label class="checkbox-inline"><input type="radio" name="textures" id="texture1" value="textureOption1" checked="checked" /><span>三层A瓦优质</span></label>
									<label class="checkbox-inline"><input type="radio" name="textures" id="texture2" value="textureOption2" /><span>三层A瓦优质</span></label>
									<label class="checkbox-inline"><input type="radio" name="textures" id="texture3" value="textureOption3" /><span>三层A瓦优质</span></label>
									<label class="checkbox-inline"><input type="radio" name="textures" id="texture4" value="textureOption4" /><span>三层A瓦优质</span></label>
									<label class="checkbox-inline"><input type="radio" name="textures" id="texture5" value="textureOpiton5" /><span>三层A瓦优质</span></label>

									<div class="btn-group">
										<button type="button" class="btn btn-default">查看详情</button>
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									      <span class="caret"></span>									 
									    </button>
										<ul class="dropdown-menu" role="menu">
											<li>
												<a href="#">详情1</a>
											</li>
											<li role="presentation">
												<a href="#">详情2</a>
											</li>

											<li role="presentation">
												<a href="#">详情3</a>
											</li>
											<li role="presentation">
												<a href="#">详情4</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<button class="btn btn-danger next-step col-md-2" type="submit">下一步</button>

						</form>

					</div>
				</div>
			</div>

		</div>
		<footer class="footer">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-12">
						51包装网——纸箱包装服务首选平台
					</div>
					<div class="footer-center col-md-4 col-sm-12">
						<ul>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<a href="#">配送流程</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">下单指南</a>
							</li>
							<li>
								<a href="#">媒体介绍</a>
							</li>
						</ul>
					</div>
					<div class="footer-right col-md-4 col-sm-12 ">
						<ul>
							<li>TEL：010-12345678</li>
							<li>企业QQ：123456789</li>
							<li>微信号：XXXXXXX</li>

						</ul>
						<img class="pull-right" src="img/qrcode.png" />
					</div>
				</div>
			</div>

			</div>
		</footer>
		<div class="copyright">
			<div class="container">
				<p>北京五一包装科技有限公司Copyright&copy;2015&nbsp;&nbsp;51baozhuang.com015&nbsp;All rights reserved.&nbsp;京icp备99999999-1
				</p>
			</div>
		</div>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>